<template>
  <div class="playList-offical">
    <div class="group_header">
      <h2>{{ title }}</h2>
      
      <span class="btn_more"  @click="more()"> 更多 <van-icon name="arrow" /> </span>
    </div>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="item in djRadios" :key="item.id" @click="selectPlaylist(item)">
          <div class="cover">
            <img :src="item.picUrl" alt="" name="play" />
            <span>
              <van-icon name="service-o" /> {{ item.subCount | numFilter(0) }} 万
            </span>
          </div>
          <span class="udtitle">
            <span>
              {{ item.secondCategory }}
            </span>
            {{ item.lastProgramName }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import { Toast } from "vant";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      musicList: [],
      playListData: [],
      categories: [], //电台类型 数组
      djRadios: [],
      radios: [],
      test: " ",
    };
  },
  created() {
    this.getPlayList();
  },
  props: {
    //参数化
    //test:null,
    title: {
      type: String, //可以注明设置类型，
      default: "默认值", //默认值,
      required: false, //是否必须
    },
    type: {
      type: String, //可以注明设置类型，
      default: "3", //默认值,
      required: false, //是否必须
    },
    id:{

    }
  },
  methods: {
    getPlayList() {
      axios
        // .get("api/top/playlist")
        // .get("/api/dj/catelist/")
        .get("/api/dj/recommend/type?type=" + this.type) //  电台 - 推荐类型
        .then((res) => {
          // console.log(res);
          console.log(res);
          this.djRadios = res.data.djRadios;
          // this.test = res.data.data.categoryName;
          this.betterScrollHorizontal(this.djRadios.length, 110);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    betterScrollHorizontal(num, itemWidth) {
      let width = num * itemWidth;
      this.$refs.content.style.width = width + "px";
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true,
          startX: 0,
          scrollX: true, //横向为true
          scrollY: false,
        });
      });
    },
    selectPlaylist(item) {
      let that = this;
      const id = item.id;
      that.$router.push({
        path: `/detail/${id}`,
      });
    },
    more(){
      let that = this;
      const type = that.type;
      that.$router.push({
        path: `/more/${type}`,
      });

    }
  },
  filters: {
    numFilter(value, num) {
      console.log(value);
      return parseFloat(value / 100).toFixed(num);
    },
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 90%;
  border-radius: 20px;
}

.playList-offical {
  width: 90%;
  margin: 0 auto;
}

.playList-offical > h1 {
  font-size: 18px;
  text-align: left;
}

.wrapper {
  width: 100%;
  overflow: hidden;
}

ul.content > li {
  width: 110px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

ul.content > li img {
  width: 85%;
  border-radius: 20px;
}

ul.content > li > span {
  display: block;
  width: 80%;
  margin: 1vw  auto;
  font-size: 12px; 
  overflow:hidden; /*超出的文本隐藏 */
  text-overflow:ellipsis; 
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2;

}

.cover {
  position: relative;
}
.cover > img {

box-shadow: 5px 5px 5px rgba(0,0,0,.5);

}

.cover > span {
  display: block;
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 0;
  background-color: rgba(128, 128, 128, 0.401);
  border-radius: 20px;
  width: 80px;
  color: rgb(241, 234, 234);
}

.songs {
  margin-top: 1rem;
  margin-left: 3rem;
  color: #a76767;
  float: left;
  text-align: left;
}



.udtitle > span {
  border-style: solid;
  border-width: 1px;
  border-color: #dfdfdf;
  border-radius: 5px;
  height: 20px;
  color: #a6a6a6;
  /* position: 5px; */
  padding: 1.5px;
}

.btn_more {
  position: relative;
  border-style: solid;
  border-width: 1px;
  border-color: #e2e2e2;
  border-radius: 20px;
  right: 0px;
  padding: 4px 10px;
}
.group_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
